<template>
    <div>
        <!--<el-input v-model="imgPath" @input="srcInput" placeholder="图片路径" :disabled="imgInputDisabled"></el-input>-->
        <el-upload
                class="upload-demo"
                accept=".jpg,.png"
                :action="uploadUrl"
                :data="signData"
                :multiple="false"
                :limit="1"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :file-list="fileList"
                :headers="header"
                list-type="text">
            <slot>
                <el-button size="small" type="primary">点击上传</el-button>
            </slot>
            <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
    </div>
</template>

<script>
    import {getUUID} from "@/utils";
    import Cookies from "js-cookie";

    export default {
        name: "img-upload",
        data(){
            return {
                imgPath:'',

                fileList: [],
                uploadUrl: this.global.fileUrl,
                // uploadUrl: "https://blog-yunglee.oss-cn-chengdu.aliyuncs.com",
                imgInputDisabled:false, //是否支持自定义输入，在上传选择后不允许再次输出

                signData: {
                    policy: '',
                    signature: '',
                    key: '',
                    ossaccessKeyId: '',
                    accessKeyId: '',
                    dir: '',
                    host: '',
                },

                //请求头数据
                header:{},
            }
        },
        props:{
            src:{
                type:String,
                default:''
            }
        },
        watch:{
            src(val){
                this.imgPath = val;
            }
        },
        model: {
            prop: 'src',
            event: 'change-data'
        },
        methods:{

            //上传前操作-获取签名
            beforeUpload(file) {
                console.log(file);
                let _self = this;
                let filename = file.name;

                //增加token数据
                this.header.token = Cookies.get('token');

                return new Promise((resolve, reject) => {
                    this.$api.File.ossPolicy().then((data) => {
                        if (data && data.code === 0) {
                            console.log("签名返回数据" + data.data);

                            _self.signData.ossaccessKeyId = data.data.accessid;
                            _self.signData.accessKeyId = data.data.accessid;
                            _self.signData.policy = data.data.policy;
                            _self.signData.signature = data.data.signature;
                            _self.signData.key = data.data.dir + getUUID() + `_${filename}`;
                            _self.signData.dir = data.data.dir;
                            _self.signData.host = data.data.host;
                            _self.signData.expire = data.data.expire;
                            resolve();
                        } else {
                            this.$message.error(data.msg)
                            reject();
                        }
                    })

                });
            },
            handleSuccess(response, file, fileList) {
                this.imgPath = this.uploadUrl + '/' + this.signData.key;
                this.imgInputDisabled = true;
                this.srcInput();
            },

            srcInput(){
                this.$emit('change-data', this.imgPath)
            },
        },
    }
</script>

<style scoped>

</style>